<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
    <head>
        <title>仓库管理系统</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <!-- Bootstrap -->
        <link rel="stylesheet" media="screen" href="css/bootstrap.min.css" />
        <link rel="stylesheet" media="screen" href="css/bootstrap-theme.min.css" />

        <!-- Bootstrap Admin Theme -->
        <link rel="stylesheet" media="screen" href="css/bootstrap-admin-theme.css" />
        <link rel="stylesheet" media="screen" href="css/bootstrap-admin-theme-change-size.css" />

        <!-- Vendors -->
        <link rel="stylesheet" media="screen" href="vendors/datatables/css/dataTables.bootstrap.min.css" />
        <link rel="stylesheet" media="screen" href="vendors/spectrum/spectrum.css" />
        <link rel="stylesheet" type="text/css" href="vendors/webuploader/webuploader.css"  />
        <!-- (...) -->
        <style type="text/css">
        .bootstrap-admin-panel-content .btn-toolbar {
            margin-bottom: 5px;
        }
        .icon {
          width: 16px;
          height: 16px;
          border: 1px solid black;
        }
        .userdlg {
            overflow: hidden;;
        }
        .userdlg legend {
            padding: 5px;
        }
        .userdlg-bbar button {
            width: 75px;
            margin: 0 0 10px 5px;
        }        
		table.dataTable tbody  tr.selected  td {
		    background-color: #B0BED9;
		}		
		.editform {
		  width: 500px;
		  float:left;
		}
		.images {
		  position: absolute;
		  right: 20px;
		  top: 50px;
		  width: 300px;
		  height: 300px;
		}
		#edit_images a {
		  text-decoration:  none;
		  width: 75px;
		  padding: 5px;
		}
        #edit_images a.selected {
          border: solid 1px #00f;
          padding: 4px;
        }
        #filePicker {
		    display: inline-block;
		    line-height: 1.428571429;
		    vertical-align: middle;
		    margin: 0 12px 0 0;
		}
        #filePicker .webuploader-pick {
		    padding: 7px 12px;
		    display: block;
		}
		#uploader {
		  margin-top: 5px;
		}
        </style>

        <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!--[if lt IE 9]>
           <script type="text/javascript" src="js/html5shiv.js"></script>
           <script type="text/javascript" src="js/respond.min.js"></script>
        <![endif]-->
    </head>
    <body class="bootstrap-admin-with-small-navbar">        
        <th:block th:include="template :: header"/>
        
        <div class="container">
            <!-- left, vertical navbar & content -->
            <div class="row">
                <!-- left, vertical navbar -->
                <div class="col-md-2 bootstrap-admin-col-left" th:include="template :: leftnav (current=products)">
                </div>

                <!-- content -->
                <div class="col-md-10">
                    
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="panel panel-default">                        
                                <div class="panel-heading">
                                    <div class="text-muted bootstrap-admin-box-title">产品列表</div>
                                </div>
                                <div class="bootstrap-admin-panel-content">
                                    <div class="btn-toolbar">
                                    <button id="btnAdd" class="btn btn-default" type="button">添加新产品</button>
                                    <button id="btnEdit" class="btn btn-default" type="button">修改产品</button>
                                    <button id="btnDel" class="btn btn-default" type="button">删除产品</button>
                                    </div>
                                    <table class="table table-striped table-bordered" id="products">
                                        <thead>
                                            <tr>
                                                <th>编号</th>
                                                <th>显示颜色</th>
                                                <th>名称</th>
                                                <th>条码</th>
                                                <th>单位</th>
                                                <th>规格型号</th>
                                                <th>生产厂家</th>
                                                <th>联系电话</th>
                                                <th>产品类别</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- footer -->
        <div th:include="template :: footer"></div>
        
        <!-- 新建产品 -->
        <div id="creatediv" class="userdlg"  style="display: none;">
            <form class="form-horizontal" >
              <fieldset>
                  <legend>新建产品</legend>
                  <div class="form-group">
                      <label class="col-sm-3 control-label" for="add_id">编号</label>
                      <div class="col-sm-6">
                          <input class="form-control" id="add_id" name="id" type="text"  placeholder="编号"/>
                      </div>
                  </div>
                  <div class="form-group">
                      <label class="col-sm-3 control-label" for="add_color">显示颜色</label>
                      <div class="col-sm-6">
                          <input class="form-control colorpicker" id="add_color" name="color" type="text"  value="#000"/>
                      </div>
                  </div>   
                  <div class="form-group">
                      <label class="col-sm-3 control-label" for="add_name">名称</label>
                      <div class="col-sm-6">
                          <input class="form-control" id="add_name" name="name" type="text"  placeholder="名称"/>
                      </div>
                  </div>
                  <div class="form-group">
                      <label class="col-sm-3 control-label" for="add_barcode">条码</label>
                      <div class="col-sm-6">
                          <input class="form-control" id="add_barcode" name="barcode" type="text"  placeholder="条码"/>
                      </div>
                  </div>
                  <div class="form-group">
                      <label class="col-sm-3 control-label" for="add_unit">单位</label>
                      <div class="col-sm-6">
                          <input class="form-control" id="add_unit" name="unit" type="text"  placeholder="单位"/>
                      </div>
                  </div>
                  <div class="form-group">
                      <label class="col-sm-3 control-label" for="add_spec">规格型号</label>
                      <div class="col-sm-6">
                          <input class="form-control" id="add_spec" name="spec" type="text"  placeholder="规格型号"/>
                      </div>
                  </div>
                  <div class="form-group">
                      <label class="col-sm-3 control-label" for="add_vendor">生产厂家</label>
                      <div class="col-sm-6">
                          <input class="form-control" id="add_vendor" name="vendor" type="text"  placeholder="生产厂家"/>
                      </div>
                  </div>
                  <div class="form-group">
                      <label class="col-sm-3 control-label" for="add_phone">联系电话</label>
                      <div class="col-sm-6">
                          <input class="form-control" id="add_phone" name="phone" type="text"  placeholder="联系电话"/>
                      </div>
                  </div>
                  <div class="form-group">
                      <label class="col-sm-3 control-label" for="add_catalog">产品类别</label>
                      <div class="col-sm-6">
                          <input class="form-control" id="add_catalog" name="catalog" type="text"  placeholder="产品类别"/>
                      </div>
                  </div>
                  <div class="userdlg-bbar">
	                  <button type="button" class="btn btn-primary">确定</button>
	                  <button type="reset" class="btn btn-default">取消</button>
                  </div>
              </fieldset>
          </form>        
        </div>

        <!-- 修改产品 -->
        <div id="editdiv"  class="userdlg" style="display: none;">
            <div class="editform">
	            <form class="form-horizontal" >
	              <fieldset>
	                  <legend>修改产品</legend>
	                  <div class="form-group">
	                      <label class="col-sm-3 control-label" >编号</label>
	                      <div class="col-sm-8">
	                            <p id="edit_id" class="form-control-static"></p>                      
	                      </div>
	                  </div>
	                  <div class="form-group">
	                      <label class="col-sm-3 control-label" for="edit_color">显示颜色</label>
	                      <div class="col-sm-6">
	                          <input class="form-control colorpicker" id="edit_color" name="color" type="text" />
	                      </div>
	                  </div>
	                  <div class="form-group">
	                      <label class="col-sm-3 control-label" for="edit_name">名称</label>
	                      <div class="col-sm-8">
	                          <input class="form-control" id="edit_name" name="name" type="text"  placeholder="名称"/>
	                      </div>
	                  </div>                  
	                  <div class="form-group">
	                      <label class="col-sm-3 control-label" for="edit_barcode">条码</label>
	                      <div class="col-sm-6">
	                          <input class="form-control" id="edit_barcode" name="barcode" type="text"  placeholder="条码"/>
	                      </div>
	                  </div>
                      <div class="form-group">
                          <label class="col-sm-3 control-label" for="edit_unit">单位</label>
                          <div class="col-sm-6">
                              <input class="form-control" id="edit_unit" name="unit" type="text"  placeholder="单位"/>
                          </div>
                      </div>
                      <div class="form-group">
                          <label class="col-sm-3 control-label" for="edit_spec">规格型号</label>
                          <div class="col-sm-6">
                              <input class="form-control" id="edit_spec" name="spec" type="text"  placeholder="规格型号"/>
                          </div>
                      </div>
	                  <div class="form-group">
	                      <label class="col-sm-3 control-label" for="edit_vendor">生产厂家</label>
	                      <div class="col-sm-8">
	                          <input class="form-control" id="edit_vendor" name="vendor" type="text"  placeholder="生产厂家"/>
	                      </div>
	                  </div>
	                  <div class="form-group">
	                      <label class="col-sm-3 control-label" for="edit_phone">联系电话</label>
	                      <div class="col-sm-8">
	                          <input class="form-control" id="edit_phone" name="phone" type="text"  placeholder="联系电话"/>
	                      </div>
	                  </div>
	                  <div class="form-group">
	                      <label class="col-sm-3 control-label" for="edit_catalog">产品类别</label>
	                      <div class="col-sm-8">
	                          <input class="form-control" id="edit_catalog" name="catalog" type="text"  placeholder="产品类别"/>
	                      </div>
	                  </div>
                      <div class="form-group">
                          <label class="col-sm-3 control-label" >产品图片</label>
                          <div class="col-sm-8">
                                <div id="edit_images" class="form-control-static"></div>    
                                <div id="uploader">
								    <!--用来存放item-->
								    <div id="fileList" class="uploader-list"></div>
								    <div class="btns">
                                    <div id="filePicker" >上传图片</div>
                                    <button id="btndel" type="button" class="btn btn-default">删除图片</button>
								    </div>
								</div>                                                  
                          </div>
                      </div>
                      <div class="userdlg-bbar">
		                  <button type="button" class="btn btn-primary">确定</button>
		                  <button type="button" class="btn btn-default">取消</button>
	                  </div>
	              </fieldset>
	          </form>        
	        </div>
	        <div id="imagediv" class="images thumbnail">
	           
	        </div>
        </div>
                
<!--         <script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script> -->
        <script type="text/javascript" src="vendors/jquery-1.11.3.js"></script>
        <script type="text/javascript" src="vendors/jquery-ajax-mvc-patch.js"></script>
        <script type="text/javascript" src="js/bootstrap.min.js"></script>
        <script type="text/javascript" src="js/twitter-bootstrap-hover-dropdown.min.js"></script>
        <script type="text/javascript" src="vendors/datatables/js/jquery.dataTables.min.js"></script>
        <script type="text/javascript" src="vendors/datatables/js/dataTables.bootstrap.min.js"></script>
        <script type="text/javascript" src="vendors/jquery-dateFormat.min.js"></script>
        <script type="text/javascript" src="vendors/spectrum/spectrum.js"></script>
        <script type="text/javascript" src="vendors/spectrum/jquery.spectrum-zh-cn.js"></script>
        <script type="text/javascript" src="vendors/layer/layer.js"></script>
        <script type="text/javascript" src="vendors/jquery.validate.js"></script>        
        <script type="text/javascript" src="vendors/webuploader/webuploader.js"></script>
        <script type="text/javascript" src="js/app/tools.js"></script>
        <script type="text/javascript" src="js/app/products.js"></script>
    </body>
</html>
